<template>
	<div class="app">
		<uni-list>
			<uni-list-item title="公司名称" :custom="true" :showArrow="false">
				<input v-model="form.nick_name" placeholder="请输入公司名称" />
			</uni-list-item>
			<uni-list-item title="店铺类型" :custom="true">
				<picker @change="bindPickerChange" :value="pickerIndex" :range="columns" range-key="role_name">
					<input v-model="form.role_name" disabled placeholder="请选择" />
				</picker>
			</uni-list-item>
			<uni-list-item title="经营地址" :custom="true" @click="$refs.mpvueCityPicker.show()">
				<input v-model="address" disabled placeholder="请选择" />
			</uni-list-item>
		</uni-list>

		<mpvue-city-picker themeColor="#FFD11A" ref="mpvueCityPicker" :pickerValueDefault="defaultArea" @onConfirm="onConfirm"></mpvue-city-picker>

		<div class="btn_wrap">
			<div class="confirm_btn" @click="submit">确定</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'

import { setTimeout } from 'timers'
import { addStore } from '@/api/auth'

export default {
	name: 'AddStore',
	components: {
		uniList,
		uniListItem,
		mpvueCityPicker
	},
	data() {
		return {
			form: {
				nick_name: '',
				role_id: '',
				role_name: '',
				province_id: null,
				city_id: null,
				district_id: null
			},

			// 地区
			defaultArea: [0, 0, 1],
			address: '',
			// pick
			pickerIndex: 0
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' }),
		columns() {
			if (this.userInfo.role_id == 2) {
				return [{ role_name: '经销商', role_id: '2' }]
			} else {
				return [
					{ role_name: '装修公司', role_id: '1' },
					// { role_name: '经销商', role_id: '2' },
					{ role_name: '设计师', role_id: '3' },
					{ role_name: '店长/导购', role_id: '4' },
					{ role_name: '安装工', role_id: '5' },
					{ role_name: '家居顾问', role_id: '6' }
				]
			}
		}
	},
	methods: {
		// 切换身份
		bindPickerChange: function(e) {
			let pickerIndex = e.target.value
			this.form.role_name = this.columns[pickerIndex].role_name
			this.form.role_id = this.columns[pickerIndex].role_id
		},

		onConfirm(e) {
			console.log(e, 'mpvue picker')
			this.address = e.label
			this.form.province_id = e.code[0]
			this.form.city_id = e.code[1]
			this.form.district_id = e.code[2]
		},

		submit() {
			if (!this.form.nick_name) {
				uni.showToast({
					title: '请输入公司名称',
					icon: 'none'
				})
				return
			}
			if (!this.form.role_id) {
				uni.showToast({
					title: '请选择店铺类型',
					icon: 'none'
				})
				return
			}
			if (!this.form.province_id) {
				uni.showToast({
					title: '请选择经营地址',
					icon: 'none'
				})
				return
			}
			const params = {
				...this.form
			}
			addStore(params).then((res) => {
				if (res.status == 'success') {
					uni.showToast({
						title: '创建成功',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 500)
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.app {
		.btn_wrap {
			padding: 60px 30px 0;

			.confirm_btn {
				height: 90px;
				line-height: 90px;
				text-align: center;
				background: rgba(255, 209, 26, 1);
				border-radius: 45px;
				font-size: 32px;
				color: rgba(58, 27, 4, 1);
			}
		}
	}
</style>
